<template>
  <div
    @click="handlerClick"
    class="backtop-container"
    :style="{ width: size + 'px', height: size + 'px' }"
  >
    <div class="backtop-content">
      <i class="icon" :style="{ 'font-size': size / 2.5 + 'px' }">Top</i>
    </div>
  </div>
</template>

<script>
export default {
  name: "BackTop",
  props: {
    size: {
      type: Number,
      default: 70,
    },
  },
  methods: {
    handlerClick() {
      this.$emit("click");
    },
  },
};
</script>

<style scoped lang="less">
@import "@/styles/var.less";
.backtop-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
  .backtop-content {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: @primary;
    .icon {
      font-size: 2rem;
      font-weight: 800;
      color: #fff;
    }
  }
}
</style>
